<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>注册</title>
    <!-- <link rel="stylesheet" type="text/css" href="css/regest.css" /> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        ol,
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        body {
            overflow: -Scroll;
            overflow-x: hidden
        }
        
        header {
            width: 980px;
            height: 90px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        header>img {
            width: 204px;
            height: 36px;
        }
        
        header>.assit {
            font-size: 12px;
        }
        
        header>.assit>img {
            vertical-align: middle;
        }
        
        .line {
            width: 960px;
            height: 32px;
            margin: 0 auto;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 12px;
        }
        
        .line>span {
            position: relative;
            display: inline-block;
            color: #999;
            margin-right: 10px;
        }
        
        .line>span:nth-child(1),
        .line>span:nth-child(3),
        .line>span:nth-child(5) {
            width: 260px;
            height: 6px;
            background: #ccc;
        }
        
        .line>span.active {
            background: #acd252;
            color: #acd252;
        }
        
        .line>span:nth-child(2),
        .line>span:nth-child(4),
        .line>span:nth-child(6) {
            width: 50px;
            background: none;
        }
        
        .line>span:nth-child(1) {
            background: #acd252;
        }
        
        .line>span:nth-child(1)::after {
            position: absolute;
            right: -3px;
            top: -6px;
            width: 15px;
            height: 15px;
            content: "";
            border-radius: 50%;
            background: #acd252;
        }
        
        .line>span:nth-child(3)::after {
            position: absolute;
            right: -3px;
            top: -6px;
            width: 15px;
            height: 15px;
            content: "";
            border-radius: 50%;
            background: #ccc;
        }
        
        .line>span:nth-child(5)::after {
            position: absolute;
            right: -3px;
            top: -6px;
            width: 15px;
            height: 15px;
            content: "";
            border-radius: 50%;
            background: #ccc;
        }
        
        .main {
            width: 960px;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .main form {
            width: 410px;
            height: 370px;
            float: left;
        }
        
        .main form>p {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 16px 0;
        }
        
        .main form>p>input {
            /* width: 130px; */
            height: 38px;
            padding: 0 4px;
        }
        
        .main form>p:nth-child(1) {
            margin-top: 40px;
        }
        
        .main form>p:nth-child(1)>span {
            width: 75px;
            text-align: right;
            font-size: 14px;
        }
        
        .main form>p:nth-child(1)>input {
            width: 300px;
            height: 40px;
        }
        
        .main form>p:nth-child(2)>input {
            width: 300px;
            height: 40px;
            padding: 0 4px;
        }
        
        .main form>p:nth-child(2)>span {
            width: 75px;
            text-align: right;
            font-size: 14px;
        }
        
        .main form>p:nth-child(3) {
            position: relative;
        }
        
        .main form>p:nth-child(3)>span {
            width: 75px;
            text-align: right;
            font-size: 14px;
        }
        
        .main form>p:nth-child(3)>input {
            width: 300px;
            height: 40px;
        }
        
        .main form>p:nth-child(3)>span:nth-child(3) {
            position: absolute;
            right: 44px;
            font-size: 12px;
            color: blue;
        }
        
        .main form>p:nth-child(3)>span:nth-child(3):hover {
            text-decoration: underline;
        }
        
        .main form>p:nth-child(4) {
            font-size: 12px;
            margin-left: 112px;
        }
        
        .main form>p:nth-child(5)>input {
            margin-left: 110px;
            width: 220px;
            height: 42px;
            background: orange;
            border: 0;
            border-radius: 4px;
            color: #fff;
            font-size: 16px;
        }
        
        .main form>p:nth-child(6)>span {
            margin-left: 112px;
            font-size: 12px;
            color: blue;
        }
        
        .main form>p:nth-child(6)>span:hover {
            text-decoration: underline;
        }
				
				div.back {
					width: 100%;
					height: 100%;
					background: rgba(0, 0, 0, .4);
					position: absolute;
					left: 0;
					top: 0;
					display: none;
					z-index: 1;
				}
				
				div.box {
					width: 620px;
					height: 480px;
					border: 2px solid #000;
					border-radius: 5px;
					position: absolute;
					background: #fff;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					display: none;
					z-index: 10;
					padding: 20px;
				}
				div.box > .rull {
					width: 100%;
					height: 84%;
				}
				div.box > .rull > img{
					width: 100%;
					height: 100%;
				}
				div.box > p{
					width: 100%;
					height: 76px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				div.box > p > button{
					width: 160px;
					height: 42px;
					background: #fff;
					border: 1px solid #ccc;
					margin: 0 20px;
					border-radius: 6px;
					font-size: 16px;
				}
				div.box > p > button.l:hover {
					background: #fafafa;
					border: 1px solid #aaa;
				}
						
				div.box > p > button.r{
					width: 160px;
					height: 42px;
					background: #FF9A14;
					border: 1px solid #FF9A14;
					margin: 0 20px;
					color: #fff;
					border-radius: 6px;
				}
				div.box > p > button.r:hover {
					background: #CC7B10;
					border: 1px solid #CC7B10;
				}
				
    </style>
</head>

<body>
    <header>
        <a href="./index.html">
					<img src="./log-img/c_logo2020.png">
				</a>
        <div class="assit">
            <img src="./log-img/icon-assist.png">网站无障碍
        </div>
    </header>
    <div class="line">
        <span class="active"></span>
        <span class="active">验证手机</span>
        <span></span>
        <span>设置密码</span>
        <span></span>
        <span><a href="javascript:;">注册成功</a></span>
    </div>
    <div class="main">
        <form>
            <p>
                <span>用户名：</span>
                <input type="text" name="username" id="txt" placeholder="国内手机号/用户名/邮箱/卡号" />
            </p>
            <p>
                <span>密码：</span>
                <input type="password" name="userpass" id="pass" placeholder="登录密码" />
            </p>
            <p>
                <span>短信验证码</span>
                <input type="text" placeholder="6位数字">
                <span>发送验证码</span>
            </p>
            <p>同意《服务协议》和《隐私政策》</p>
            <p>
                <input class="btn1" type="button" name="" id="" value="验证" />
                <input class="btn2" type="button" name="" id="" value="注册" />
            </p>
            <p><span>企业客户注册</span></p>
        </form>
    </div>
    <div class="back"></div>
    <div class="box">
        <div class="rull"><img src="./log-img/rull.jpg" ></div>
        <p><button class="l">不同意</button><button class="r">同意并继续</button></p>
    </div>
</body>
</html>
<script src="./js/ajax.js"></script>
<script>
	// 1. 获取元素
	function $(tag) {
		return document.querySelector(tag)
	}
	window.onload = function() {
		$('.back').style.display = 'block';
		setTimeout(function(){
			$('.box').style.display = 'block';
		},1000)
		
		$('button.l').onclick = function() {
			// 不同意就跳转首页
			location.href = 'index.html'
		} 
		$('button.r').onclick = function() {
			// 同意就继续注册
			$('.box').style.display = 'none';
			$('.back').style.display = 'none';
		} 
	}

    $('input.btn2').onclick = function () {
        $ajax({
            type: 'POST',
            url: './php/addUser.php',
            data: `username=${$('#txt').value}&userpass=${$('#pass').value}`,
            callback(msg) {
                console.log(msg);
                if(msg.trim() == "success") {
                    document.cookie = `username=${$('#txt').value}`;
                    alert('注册成功^_^')
                    setTimeout(() => {
                        location.href = 'login.html';
                    }, 100);
                } else if(msg.trim() == "fail") {
                    alert('注册失败！')
                }
            }
        })
    }

    $('input.btn1').onclick = function () {
        $ajax({
            type:"GET",
            url:"./php/checkUser.php",
            data:`username=${$('#txt').value}`,
            callback(msg) {
                if(msg.trim() == "1") {
                    alert('用户名不存在,可以注册！')
                } 
                if(msg.trim() == "0") {
                    alert('用户名存在，请重新注册！')
                    $('#txt').value = $('#pass').value = ''
                }
            }
        })
    }
</script>